var app = new Vue({
  el: "#app",
  data: {
    currentGroup: {},
    groupList: [],
    showDialogAddGroup: false,
    showDialogAddUser: false,
    groupUserTable: {
      list: [],
      total: 0,
      pageNumber: 1,
      pageSize: 10,
      loading: false,
    },
    // 添加分组
    editModelGroup: "add",
    addGroupForm: {
      name: "",
    },
    addGroupRules: {
      name: [{ required: true, message: "请输入组名", trigger: "blur" }],
    },
    // 添加用户
    editModelUser: "add",
    filterUserForm: {
      cate: [],
      area: [],
      name: "",
      bindService: "",
    },
    allUserTable: {
      list: [],
      total: 0,
      pageNumber: 1,
      pageSize: 10,
      loading: false,
    },
    hasGetCateArea: false,
    cateOption: [],
    areaOption: [],
    cateProps: { value: "id", label: "name", checkStrictly: true },
    areaProps: {
      value: "id",
      label: "name",
      checkStrictly: true,
      multiple: "true",
    },
  },
  mounted() {
    this.getGroupList();
  },
  methods: {
    // 获取标签列表
    getGroupList() {
      apiGetGroupList()
        .then((res) => {
          this.groupList = res.data;
          if (this.groupList.length === 0) {
            this.currentGroup = {};
            this.groupUserTable.list = [];
            this.groupUserTable.total = 0;
            this.groupUserTable.loading = false;
            return;
          }
          this.currentGroup = this.groupList[0];
          this.getGroupUserList();
        })
        .catch((err) => {
          this.$message.error(err && err.msg);
        });
    },
    // 获取数据列表
    getGroupUserList() {
      if (!this.currentGroup.id) {
        return;
      }
      this.groupUserTable.loading = true;
      apiGetGroupUserList({
        pageNumber: this.groupUserTable.pageNumber,
        pageSize: this.groupUserTable.pageSize,
        id: this.currentGroup.id,
      })
        .then((res) => {
          const { data, total } = res;
          this.groupUserTable.list = data;
          this.groupUserTable.total = total;
          this.groupUserTable.loading = false;
          this.$refs.groupUserTable.doLayout();
        })
        .catch((err) => {
          this.groupUserTable.list = [];
          this.groupUserTable.total = 0;
          this.groupUserTable.loading = false;
          this.$message.error(err && err.msg);
        });
    },
    // 每页数
    sizeChangeHandle(table, val) {
      if (table === "groupUserTable") {
        this.groupUserTable.pageSize = val;
        this.groupUserTable.pageNumber = 1;
        this.getGroupUserList();
      } else if (table === "allUserTable") {
        this.allUserTable.pageSize = val;
        this.allUserTable.pageNumber = 1;
        this.getAllUserList();
      }
    },
    // 当前页
    currentChangeHandle(table, val) {
      if (table === "groupUserTable") {
        this.groupUserTable.pageNumber = val;
        this.getGroupUserList();
      } else if (table === "allUserTable") {
        this.allUserTable.pageNumber = val;
        this.getAllUserList();
      }
    },
    // 点击分组
    handleGroupClick(item) {
      this.currentGroup = item;
      this.groupUserTable.pageNumber = 1;
      this.getGroupUserList();
    },
    // 添加分组
    handleGroupAdd() {
      this.editModelGroup = "add";
      this.addGroupForm.name = "";
      this.showDialogAddGroup = true;
    },
    // 删除分组
    handleGroupDelete(item) {
      this.$confirm("删除组别后数据无法找回, 确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        apiGroupDelete({ id: item.id })
          .then((res) => {
            this.getGroupList();
            this.$message.success("操作成功");
          })
          .catch((err) => {
            this.$message.error(err && err.msg);
          });
      });
    },
    // 编辑分组
    handleGroupEdit(item) {
      this.editModelGroup = "edit";
      this.currentGroup = item;
      this.addGroupForm.name = item.name;
      this.showDialogAddGroup = true;
    },
    // 添加用户
    handleUserAdd() {
      this.editModelUser = "add";
      this.showDialogAddUser = true;
      this.allUserTable.pageNumber = 1;
      this.getCateArea();
      this.getAllUserList();
    },
    // 获取下拉数据
    getCateArea() {
      if (this.hasGetCateArea) {
        return;
      }
      this.hasGetCateArea = true;
      apiGetCateList()
        .then((res) => {
          const removeEmptyChildren = (items) => {
            items.forEach((item) => {
              if (item.children?.length === 0) {
                delete item.children;
              } else if (item.children) {
                removeEmptyChildren(item.children);
              }
            });
          };
          removeEmptyChildren(res.data);
          this.cateOption = res.data;
        })
        .catch((err) => {
          this.$message.error(err && err.msg);
        });
      apiGetAreaList()
        .then((res) => {
          this.areaOption = res.data;
        })
        .catch((err) => {
          this.$message.error(err && err.msg);
        });
    },
    // 删除用户
    handleUserDelete(scope) {
      apiDeleteUserFromGroup({
        groupId: this.currentGroup.id,
        userIds: scope.row.id,
      })
        .then((res) => {
          if (
            this.groupUserTable.list.length === 1 &&
            this.groupUserTable.pageNumber > 1
          ) {
            this.groupUserTable.pageNumber--;
          }
          this.getGroupUserList();
          this.$message.success("操作成功");
        })
        .catch((err) => {
          this.$message.error(err && err.msg);
        });
    },
    // 提交添加分组表单
    submitAddGroupForm() {
      this.$refs.addGroupFormRef.validate((valid) => {
        if (valid) {
          // 提交表单-添加分组
          let api = apiGroupAdd;
          let data = {
            name: this.addGroupForm.name,
          };
          if (this.editModelGroup === "edit") {
            data.id = this.currentGroup.id;
            api = apiGroupEdit;
          }
          api(data)
            .then((res) => {
              this.$refs.addGroupFormRef.resetFields(); // 清空表单
              this.showDialogAddGroup = false; // 关闭对话框
              this.getGroupList(); // 重新获取分组列表
              this.$message.success("操作成功");
            })
            .catch((err) => {
              this.$message.error(err && err.msg);
            });
        }
      });
    },
    // 取消添加分组
    cancelAddGroupForm() {
      this.showDialogAddGroup = false; // 关闭对话框
    },
    // 获取所有用户列表
    getAllUserList() {
      this.allUserTable.loading = true;

      apiGetAllUserList({
        pageNumber: this.allUserTable.pageNumber,
        pageSize: this.allUserTable.pageSize,
        groupId: this.currentGroup.id,
        ...this.filterUserForm,
      })
        .then((res) => {
          const { data, total } = res;
          this.allUserTable.list = data;
          this.allUserTable.total = total;
          this.allUserTable.loading = false;
          this.$refs.allUserTable.doLayout();
        })
        .catch((err) => {
          this.allUserTable.list = [];
          this.allUserTable.total = 0;
          this.allUserTable.loading = false;
          this.$message.error(err && err.msg);
        });
    },
    // 提交筛选用户
    submitFilterUserForm() {
      this.allUserTable.pageNumber = 1;
      this.getAllUserList();
    },
    // 重置筛选用户
    resetFilterUserForm() {
      this.$refs.filterUserFormRef.resetFields();
      this.filterUserForm = {
        cate: [],
        area: [],
        name: "",
        bindService: "",
      };
      this.allUserTable.pageNumber = 1;
      this.getAllUserList();
    },
    // 添加用户到分组
    handleUserAddToGroup(scope) {
      apiAddUserToGroup({
        groupId: this.currentGroup.id,
        userIds: scope.row.id,
      })
        .then((res) => {
          scope.row.state = 1;
          this.$message.success("操作成功");
        })
        .catch((err) => {
          this.$message.error(err && err.msg);
        });
    },
    // 关闭添加用户对话框
    handleUserAddClose() {
      this.getGroupUserList();
    },
    // 新建组回车
    handleKeyDown(e) {
      if (e.keyCode === 13) {
        e.preventDefault();
        this.submitAddGroupForm();
      }
    },
  },
});
